<template>
  <div>
    <el-table
      ref="columnTableRef"
      class="columnTable"
      :data="model_value"
      border
      max-height="65vh"
      row-key="prop"
      @row-dblclick="rowClick"
      row-class-name="cursor-pointer"
    >
      <el-table-column
        type="index"
        label="序号"
        width="55"
        align="center"
      ></el-table-column>
      <el-table-column align="center" width="55" label="显示">
        <template #default="scope">
          <span
            :class="[rowCalss(scope.row)]"
            @click="rowClick(scope.row)"
          ></span>
        </template>
      </el-table-column>
      <el-table-column
        label="列名(拖拽可重新排序)"
        prop="label"
      ></el-table-column>
      <el-table-column
        label="宽度(输入数字)"
        prop="width"
        v-if="props.options.editWidth"
      >
        <template #default="scope">
          <el-input
            v-model="scope.row.width"
            clearable
            @dblclick.stop="() => {}"
            @change="val => changeWidth(scope.row.width, val)"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column
        label="对齐方式"
        prop="align"
        v-if="props.options.editAlign"
        min-width="120"
      >
        <template #default="scope">
          <el-radio-group v-model="scope.row.align" size="small">
            <el-radio-button
              v-for="item in alignOptions"
              :key="item.value"
              :label="item.value"
              >{{ item.label }}</el-radio-button
            >
          </el-radio-group>
          <!-- <el-select
            v-model="scope.row.align"
            placeholder="Select"
            size="small"
            style="width: 100%"
          >
            <el-option
              v-for="item in alignOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select> -->
        </template>
      </el-table-column>
      <el-table-column
        label="是否显示多行"
        prop="align"
        v-if="props.options.editshowTip"
      >
        <template #default="scope">
          <el-radio-group v-model="scope.row.showOverflowTooltip" size="small">
            <el-radio-button
              v-for="item in showOverOptions"
              :key="item.value"
              :label="item.value"
              >{{ item.label }}</el-radio-button
            >
          </el-radio-group>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script setup name="FixTable">
import { reactive, toRefs, ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import Sortable from 'sortablejs'
const router = useRouter()
const route = useRoute()
const { proxy } = getCurrentInstance()

const alignOptions = [
  {
    label: '左对齐',
    value: 'left'
  },
  {
    label: '居中对齐',
    value: 'center'
  },
  {
    label: '右对齐',
    value: 'right'
  }
]
const showOverOptions = [
  {
    label: '一行',
    value: true
  },
  {
    label: '多行',
    value: false
  }
]

/* 数据格式

const tableConfig = [
  {
    show: true,
    prop: 'property',
    label: '单据属性',
    align: 'center',
    dict: order_property,
    minWidth: 80,
    showOverflowTooltip: true
  },
  {
    show: true,
    prop: 'receiptsDate',
    label: '单据日期',
    align: 'center',
    formatter: row => {
      return parseTime(row.receiptsDate, '{y}-{m}-{d}')
    },
    minWidth: 80,
    showOverflowTooltip: true
  }
]

*/
const props = defineProps({
  modelValue: {
    type: Array,
    require: true
  },
  options: {
    type: Object,
    default: () => {
      return {
        editWidth: true,
        editAlign: true,
        editshowTip: true
      }
    }
  }
})
const emit = defineEmits(['update:modelValue'])
const tableVal = ref([])
const model_value = computed({
  get() {
    // console.log('props.modelValue==>', props.modelValue)
    tableVal.value = props.modelValue
    return props.modelValue
  },
  set(value) {
    emit('update:modelValue', value)
  }
})

const changeWidth = (itemVal, val) => {
  itemVal = val
    .replace(/[^\d.]/g, '')
    .replace(/\.{2,}/g, '.') // 去除连续小数点
    .replace('.', 'xsd')
    .replace(/\./g, '')
    .replace('xsd', '.') //去除多余小数点 // 限制非数字输入
}

/**
 * 设置拖拽
 */
const setSortable = () => {
  proxy.$nextTick(() => {
    const table = document.querySelector(
      '.columnTable .el-table__body-wrapper tbody'
    )
    Sortable.create(table, {
      animation: 150,
      ghostClass: 'blue-background-class',
      // 写完以上部分就已经可以实现基本的拖拽功能了，以下是拓展
      //始拖拽事件
      onEnd: function (/**Event*/ evt) {
        let newIndex = evt.newIndex // 排序后的索引位置
        let oldIndex = evt.oldIndex // 排序前的索引位置
        // var itemEl = evt.item // 拖拽 HTMLElement

        const movedData = tableVal.value.splice(oldIndex, 1)[0]
        tableVal.value.splice(newIndex, 0, movedData)
        // emit('update:modelValue', tableVal.value)
      },
      //点击选中元素事件
      onChoose: function (/**Event*/ evt) {
        evt.oldIndex
      },
      //取消选中事件
      onUnchoose: function (/**Event*/ evt) {}
    })
  })
}
// 设置拖拽
setSortable()

// 双击行
function rowClick(row, column, event) {
  row.show = !row.show
}
// 选中行样式
const rowCalss = row => {
  let select = row.show
  return select
    ? 'i-ic-baseline-check-box text-blue-500'
    : 'i-ic-baseline-check-box-outline-blank'
}
// const rowCalss = computed(() => {
//   return function (row) {
//     let select = row.show
//     return select
//       ? 'i-ic-baseline-check-box text-blue-500'
//       : 'i-ic-baseline-check-box-outline-blank'
//   }
// })
</script>
<style lang="scss" scoped></style>
